<template>
  <div class="SignFlowHomepage">
    <img
      src="../../assets/login/icon_logo.png"
      class="SignFlowHomepage__logo"
    />
    <div class="SignFlowHomepage__content">
      <div class="Card SignContainer">
        <img
          class="SignContainer__img"
          src="https://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/gruul/20200318/index.jpg"
        />
        <div class="SignContainer__content">
          <div class="SignFlow">
            <div class="SignFlow__tabs">
              <div class="SignFlow__tabs--title">LOG IN</div>
            </div>
            <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
              label-width="85px" class="SignInForm">
              <div class="SignInForm__tabs">
                <div class="SignInForm__tab SignInForm__tab--active">
                  密码登录
                </div>
              </div>
              <el-form-item label="账号" prop="username">
                <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                </el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <div class="SignInForm__password">
                  <el-input
                    type="password"
                    v-model="loginForm.password"
                    placeholder="密码"
                    @keyup.enter.native="handleLogin"
                  />
                </div>
              </el-form-item>
              <el-button class="SignInForm__button" type="primary" @click.native.prevent="handleLogin">
                登录
              </el-button>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <footer class="SignFlowHomepage__footer">
      <p class="medusa__rights">
        Copyright © 2024 青云. All Rights Reserved
        青云团队版权所有
      </p>
    </footer>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { Route } from 'vue-router'
import { Form as ElForm, Input } from 'element-ui'
import { UserModule } from '@/store/modules/user'
import { isValidUsername } from '@/utils/validate'
import {SM4Util} from "sm4util";

@Component({
  name: 'Login',
})
export default class extends Vue {
  private validateUsername = (rule: any, value: string, callback: Function) => {
    if (!value) {
      callback(new Error('请输入用户名'))
    } else {
      callback()
    }
  }
  private validatePassword = (rule: any, value: string, callback: Function) => {
    if (value.length < 6) {
      callback(new Error('密码必须在6位以上'))
    } else {
      callback()
    }
  }
  private loginForm = {
    username: 'admin',
    password: '123456',
  } as {
    username: String
    password: String
  }

  loginRules = {
    username: [{ validator: this.validateUsername, trigger: 'blur' }],
    password: [{ validator: this.validatePassword, trigger: 'blur' }],
  }
  private loading = false
  private redirect?: string

  @Watch('$route', { immediate: true })
  private onRouteChange(route: Route) {}

  // 登录
  private handleLogin() {
    ;(this.$refs.loginForm as ElForm).validate(async (valid: boolean) => {
      if (valid) {
        const sm4 = new SM4Util();
        this.loginForm.password = sm4.encryptDefault_CBC(this.loginForm.password);
        this.loading = true
        await UserModule.Login(this.loginForm as any)
          .then((res: any) => {
            if (String(res.code) === '1') {
              this.$router.push('/')
            } else {
              // this.$message.error(res.msg)
              this.loading = false
            }
          })
          .catch(() => {
            // this.$message.error('用户名或密码错误！')
            this.loading = false
          })
      } else {
        return false
      }
    })
  }
}
</script>

<style lang="scss">
@import "../../styles/sign/sign"
</style>
